<template>
  <collapse-item :name="'摄像机'">
    <!-- 摄像头位置设置 -->
    <setting-item-box name="摄像头位置">
      <setting-item name="X轴">
        <n-input-number
          v-model:value="cameraPosition[0]"
          :step="1"
          size="small"
          @update:value="updateCameraPosition"
        />
      </setting-item>
      <setting-item name="Y轴">
        <n-input-number
          v-model:value="cameraPosition[1]"
          :step="1"
          size="small"
          @update:value="updateCameraPosition"
        />
      </setting-item>
    </setting-item-box>

    <setting-item-box name="">
      <setting-item name="Z轴">
        <n-input-number
          v-model:value="cameraPosition[2]"
          :step="1"
          size="small"
          @update:value="updateCameraPosition"
        />
      </setting-item>
      <setting-item>
        <n-button size="small" type="primary" @click="getCurrentCameraPosition">获取当前位置</n-button>
      </setting-item>
    </setting-item-box>

    <!-- 摄像头照射（lookAt）设置 -->
    <setting-item-box name="摄像头照射位置">
      <setting-item name="X轴">
        <n-input-number
          v-model:value="cameraLookAt[0]"
          :step="1"
          size="small"
          @update:value="updateCameraLookAt"
        />
      </setting-item>
      <setting-item name="Y轴">
        <n-input-number
          v-model:value="cameraLookAt[1]"
          :step="1"
          size="small"
          @update:value="updateCameraLookAt"
        />
      </setting-item>
    </setting-item-box>

    <setting-item-box name="">
      <setting-item name="Z轴">
        <n-input-number
          v-model:value="cameraLookAt[2]"
          :step="1"
          size="small"
          @update:value="updateCameraLookAt"
        />
      </setting-item>
      <setting-item>
        <n-button size="small" type="primary" @click="applyCameraSettings">应用设置</n-button>
      </setting-item>
    </setting-item-box>

    <!-- 原有设置项：最小/最大距离 -->
    <setting-item-box name="最小距离">
      <setting-item>
        <n-slider v-model:value="config.minDistance" :step="1" :min="0" :max="200" />
      </setting-item>
      <setting-item>
        <n-input-number v-model:value="config.minDistance" :min="0" size="small" />
      </setting-item>
    </setting-item-box>

    <setting-item-box name="最大距离">
      <setting-item>
        <n-slider v-model:value="config.maxDistance" :step="1" :min="0" :max="999" />
      </setting-item>
      <setting-item>
        <n-input-number v-model:value="config.maxDistance" :min="0" size="small" />
      </setting-item>
    </setting-item-box>
  </collapse-item>
</template>

<script setup lang="ts">
import { ref, watch, nextTick, onMounted } from 'vue'
import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { getCameraPositionLookAt } from '@/utils'
import { useMessage } from 'naive-ui'

const props = defineProps<{ config: any }>()

const chartEditStore = useChartEditStore()
const message = useMessage()

// 摄像机位置与照射点
const cameraPosition = ref<number[]>([20, 20, 20])
const cameraLookAt = ref<number[]>([0, 0, 0])

onMounted(() => {
  if (props.config?.cameraPosition && Array.isArray(props.config.cameraPosition)) {
    cameraPosition.value = [...props.config.cameraPosition]
  }
  if (props.config?.cameraLookAt && Array.isArray(props.config.cameraLookAt)) {
    cameraLookAt.value = [...props.config.cameraLookAt]
  }
})

watch(
  () => props.config?.cameraPosition,
  v => {
    if (v && Array.isArray(v)) cameraPosition.value = [...v]
  },
  { deep: true }
)

watch(
  () => props.config?.cameraLookAt,
  v => {
    if (v && Array.isArray(v)) cameraLookAt.value = [...v]
  },
  { deep: true }
)

const updateCameraPosition = () => {
  nextTick(() => {
    const newConfig = { ...props.config, cameraPosition: [...cameraPosition.value] }
    chartEditStore.setCameraConfig(newConfig)
  })
}

const updateCameraLookAt = () => {
  nextTick(() => {
    const newConfig = { ...props.config, cameraLookAt: [...cameraLookAt.value] }
    chartEditStore.setCameraConfig(newConfig)
  })
}

const getCurrentCameraPosition = () => {
  try {
    const canvasRef = chartEditStore.getCanvasRefs
    if (!canvasRef) {
      message.warning('画布未就绪，无法获取摄像机位置')
      return
    }
    const { position, lookAt } = getCameraPositionLookAt(canvasRef, 10)
    cameraPosition.value = [...position]
    cameraLookAt.value = [...lookAt]

    const newConfig = { ...props.config, cameraPosition: [...position], cameraLookAt: [...lookAt] }
    chartEditStore.setCameraConfig(newConfig)
    message.success('已获取当前摄像头位置和照射位置')
  } catch (err) {
    message.error('获取摄像头信息失败')
  }
}

const applyCameraSettings = () => {
  try {
    const controls = chartEditStore.getControlsInstance
    if (!controls || typeof controls.setLookAt !== 'function') {
      message.warning('控制器未就绪，无法应用设置')
      return
    }
    controls.setLookAt(
      cameraPosition.value[0],
      cameraPosition.value[1],
      cameraPosition.value[2],
      cameraLookAt.value[0],
      cameraLookAt.value[1],
      cameraLookAt.value[2],
      true
    )
    message.success('摄像头设置已应用')
  } catch (err) {
    message.error('应用摄像头设置失败')
  }
}
</script>

<style scoped>
</style>
